import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../controllers/setting_controller.dart';
import '../../../widgets/safe_network_image.dart';

class SettingView extends GetView<SettingController> {
  const SettingView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFEDF3FA),
      appBar: AppBar(
        title: Text(
          '设置',
          style: TextStyle(
            fontSize: 32.sp,
            fontFamily: 'Source Han Sans CN',
            color: const Color(0xFF333333),
          ),
        ),
        backgroundColor: const Color(0xFFEDF3FA),
        elevation: 0,
        centerTitle: true,
        leading: IconButton(
          icon: Icon(
            Icons.arrow_back_ios,
            color: const Color(0xFF333333),
            size: 40.sp,
          ),
          onPressed: () => Get.back(),
        ),
      ),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 30.w),
        child: Column(
          children: [
            SizedBox(height: 60.h),
            // 头像区域
            Center(
              child: GestureDetector(
                onTap: controller.selectAndUploadAvatar,
                child: Stack(
                  children: [
                    Obx(
                      () => ClipOval(
                        child:
                            controller.avatarUrl != null &&
                                    controller.avatarUrl!.isNotEmpty
                                ? SafeNetworkImage(
                                  imageUrl: controller.avatarUrl!,
                                  width: 120.w,
                                  height: 120.h,
                                  fit: BoxFit.cover,
                                  borderRadius: BorderRadius.circular(60.w),
                                  errorWidget: Image.asset(
                                    'assets/images/default_avatar.png',
                                    width: 120.w,
                                    height: 120.h,
                                    fit: BoxFit.cover,
                                  ),
                                )
                                : Image.asset(
                                  'assets/images/default_avatar.png',
                                  width: 120.w,
                                  height: 120.h,
                                  fit: BoxFit.cover,
                                ),
                      ),
                    ),
                    Positioned(
                      bottom: 0,
                      right: 0,
                      child: Container(
                        width: 36.w,
                        height: 36.h,
                        decoration: BoxDecoration(
                          color: const Color(0xFF666666),
                          shape: BoxShape.circle,
                          border: Border.all(color: Colors.white, width: 2.w),
                        ),
                        child: Obx(
                          () =>
                              controller.isUploadingAvatar
                                  ? SizedBox(
                                    width: 20.w,
                                    height: 20.h,
                                    child: const CircularProgressIndicator(
                                      strokeWidth: 2,
                                      color: Colors.white,
                                    ),
                                  )
                                  : const Icon(
                                    Icons.camera_alt,
                                    color: Colors.white,
                                    size: 20,
                                  ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            SizedBox(height: 20.h),
            // 当前用户名
            Obx(
              () => Text(
                controller.userName ?? '未设置昵称',
                style: TextStyle(
                  fontSize: 28.sp,
                  fontFamily: 'Source Han Sans CN',
                  color: const Color(0xFF333333),
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
            SizedBox(height: 60.h),
            // 设置选项
            Obx(
              () => _buildSettingItem(
                title: '设置昵称',
                currentValue: controller.userName ?? '未设置',
                onTap: controller.showSetUsernameDialog,
              ),
            ),
            const Spacer(),
            // 确定按钮
            GestureDetector(
              onTap: () {
                // 通知个人中心页面重新获取用户信息
                controller.notifyMinePageRefresh();
                Get.back();
              },
              child: Container(
                width: 690.w,
                height: 88.h,
                margin: EdgeInsets.only(bottom: 100.h),
                decoration: BoxDecoration(
                  color: const Color(0xFF007AFF),
                  borderRadius: BorderRadius.circular(20.r),
                ),
                child: Center(
                  child: Text(
                    '确定',
                    style: TextStyle(
                      fontSize: 28.sp,
                      fontFamily: 'Source Han Sans CN',
                      color: Colors.white,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  /// 构建设置项
  Widget _buildSettingItem({
    required String title,
    required VoidCallback onTap,
    String? currentValue,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: 690.w,
        height: 110.h,
        margin: EdgeInsets.only(bottom: 30.h),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(20.r),
        ),
        child: Row(
          children: [
            SizedBox(width: 30.w),
            Text(
              title,
              style: TextStyle(
                fontSize: 28.sp,
                fontFamily: 'Source Han Sans CN',
                color: const Color(0xFF333333),
              ),
            ),
            const Spacer(),
            Text(
              currentValue ?? '未设置',
              style: TextStyle(
                fontSize: 28.sp,
                fontFamily: 'Source Han Sans CN',
                color: const Color(0xFF999999),
              ),
            ),
            Icon(
              Icons.keyboard_arrow_right,
              color: const Color(0xFF999999),
              size: 48.sp,
            ),
            SizedBox(width: 30.w),
          ],
        ),
      ),
    );
  }
}
